<!--
系统管理-账号管理页面
@author： hejie
-->

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script th:src="@{static/js/axios.min.js}"></script>
    <script th:src="@{static/js/qs.min.js}"></script>
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;

    }
</style>

<body>

<!--1.div-->
<!--重置密码-->
<div id="modPassword">
    <!--2.操作——“重置密码”，弹出模态框-->
    <el-dialog title="重置密码" :visible.sync="dialogFormVisible">
        <el-form :model="form" :inline="true">
            <el-input v-model="form.userInfo_id" value="form.userInfo_id" style="display: none" autocomplete="off"></el-input>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.telephone" style="width: 220px" disabled="disabled" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.userName" style="width: 220px" disabled="disabled" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="设置新密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" :label-width="formLabelWidth">
                <el-input v-model="form.password_sure" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false,updateSecret(form.userInfo_id)">确 定</el-button>
        </div>
    </el-dialog>
</div><!--第一个div结束-->

<script type="text/javascript" th:inline="javascript">
    /*1.div：“重置密码”*/
    let modPassword = new Vue({
        el: "#modPassword", //绑定的div
        data() {
            return {
                //tableData是表格中的数据。  datas.goods是为了后端查询数据为空时有一个数据
                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                form:{      //这个是编辑里面的form表单，以下是表单要修改的内部的字段名
                    userInfo_id:'',//被点击行的userInfo.id
                    telephone: '',
                    userName: '',
                    password: '',
                    password_sure: ''//确认密码
                },
                formLabelWidth: '120px'
            };
        },
        methods: {
            //修改密码
            updateSecret : (id)=>{
                if (modPassword.form.password != modPassword.form.password_sure){
                    alert("两次输入的密码不一致");
                }
                else {
                    let params =new FormData();
                    params.append("rawPassword",modPassword.form.password);
                    axios.put([[@{/user/}]] + id,params).then(res => {
                        console.log(res);
                        location.reload();
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        }
    });//end vue


</script><!--对应第1个div-->

<!--2.div-->
<!--点击“新增账号”，弹出对话框-->
<div id="addUserInfo">
    <!--2.操作——“新增账号”，弹出模态框-->
    <el-dialog title="新增账号" :visible.sync="dialogFormVisible">
        <el-form :model="form" :inline="true">
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.telephone" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input v-model="form.job" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.userName" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色权限" :label-width="formLabelWidth">
                <el-select value-key="id" v-model="form.roleId" placeholder="请选择角色">
                    <el-option
                            v-for="item in roleInfos"
                            :key="item.id"
                            :label="item.roleDesc"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false,addUserInfo()">确 定</el-button>
        </div>
    </el-dialog>
</div><!--第2个div结束-->

<script type="text/javascript" th:inline="javascript">
    /*1.div：“新增账号”*/
    let addUserInfo = new Vue({
        el: "#addUserInfo", //绑定的div
        data() {
            return {
                //tableData是表格中的数据。  datas.goods是为了后端查询数据为空时有一个数据
                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                form:{      //这个是编辑里面的form表单，以下是表单要修改的内部的字段名
                    telephone: '',
                    job: '',
                    userName: '',
                    roleId:''//选择的userInfo.id
                },
                //存储从后端查询的 “所有角色”
                roleInfos:[{
                    id:1,
                    role:'Jinli',
                    roleDesc:'经理'
                },
                    {
                        id:2,
                        role:'guanli',
                        roleDesc:'员'
                    }],
                formLabelWidth: '120px'
            };
        },
        methods: {
            //修改密码

            //新增一个userInfo
            addUserInfo : ()=>{
                if (addUserInfo.form.telephone==''){
                    alert("请填写手机号");
                }else if (addUserInfo.form.job==''){
                    alert("请填写职位");
                }else if (addUserInfo.form.userName==''){
                    alert("请填写用户名");
                }else if (addUserInfo.form.roleId==''){
                    alert("请选择角色权限");
                }else {
                    let params =new FormData();
                    params.append("telephone",addUserInfo.form.telephone);
                    params.append("job",addUserInfo.form.job);
                    params.append("userName",addUserInfo.form.userName);
                    params.append("roleInfo_id",addUserInfo.form.roleId);
                    params.append("password","123456");
                    // params.append("roleBean.id","2");
                    axios.post([[@{user/more}]],params)
                .then(function (res) {
                        console.log(res);
                        location.reload();
                    })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        }
    });//end vue


</script><!--对应第2个div-->








<!--3.div：第3个div开始-->
<!--“搜索”、“导出”：根据用户名、职位、手机号、状态、角色来搜索-->
<div id="app">
    <!--<div id="appso">-->
    <el-row class="demo-autocomplete">
        <el-col :span="2">用户名</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findUser.userName"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <el-col :span="2"> 职位</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findUser.job"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="true"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <el-col :span="2"> 手机号</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findUser.telephone"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>
    </el-row>

    <br>
    <el-row>
        <el-col :span="2">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态</el-col>
        <el-col :span="6">
            <el-select v-model="findUser.status" placeholder="请选择状态">
                <el-option label="---" value="0"></el-option>
                <el-option label="已禁用" value="-1"></el-option>
                <el-option label="已启用" value="1"></el-option>
            </el-select>
        </el-col>

        <el-col :span="2"> &nbsp;&nbsp;&nbsp;角色</el-col>
        <el-col :span="6">
            <el-select value-key="id" v-model="findUser.roleId" placeholder="请选择角色">
                <el-option
                        v-for="item in roleInfos"
                        :key="item.id"
                        :label="item.roleDesc"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-col>

        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="findWhenLoad()">查询</el-button>
            <!--            <el-button type="primary" icon="el-icon-search" size="small" @click="findWhenLoad(1)">查询</el-button>-->
            <el-button type="primary" size="small" @click="exportList()">导出</el-button>
            <el-button type="primary" size="small" @click="showAddDialog()">新增账号</el-button>
        </el-col>
    </el-row>
    <!--</div>&lt;!&ndash;end “搜索”、“导出”&ndash;&gt;-->


    <!--<div id="app">-->
    <!--1.表格-->
    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;height: 700px"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}" >
            <el-table-column
                    prop="userName"
                    label="用户名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="roleInfo.roleDesc"
                    label="角色名称"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="status"
                    :formatter="statusFormatter"
                    label="状态"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="job"
                    label="职位"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="telephone"
                    label="手机号"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    :formatter="dateFormatter"
                    label="创建时间"
                    width="160">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="230">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button type="text" size="small" @click="enable_disable(scope.row.id,scope.row.status)" >
                        <span v-if="scope.row.status== 1" >禁用</span>
                        <span v-else="scope.row.status== 0" >启用</span>
                    </el-button>
                    <el-button type="text" size="small" @click="dialogFormVisible = true,fill_userInfo(scope.row)" >编辑</el-button>
                    <el-button type="text" size="small" @click="fill_Secret_dialog(scope.row)">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- @size-change：绑定每页数据size，并刷新数据  -->
        <!-- @current-change:绑定当前页码，并刷新数据  -->
        <!--@size-change="handleSizeChange"-->
        <el-pagination
                v-if="!noResult&&!error"

                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total,prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </template>

    <!--2.操作——“编辑”，弹出模态框-->
    <el-dialog title="编辑账号" :visible.sync="dialogFormVisible">
        <el-form :model="form" :inline="true">
            <el-input v-model="form.userInfo_id" value="form.userInfo_id" style="display: none" autocomplete="off"></el-input>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.telephone" style="width: 220px" disabled="disabled" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.userName" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色权限" :label-width="formLabelWidth">
                <el-select value-key="id" v-model="form.roleId" placeholder="请选择角色">
                    <el-option
                            v-for="item in roleInfos"
                            :key="item.id"
                            :label="item.roleDesc"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input v-model="form.job" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false,mod(form.userInfo_id)">确 定</el-button>
        </div>
    </el-dialog>

</div><!--第3个div结束-->

<!--对应第1个div-->
<script type="text/javascript" th:inline="javascript">
    <!--页面加载完毕后,把后端查询的数据显示在table中-->
    window.onload=function () {
        // demo.findWhenLoad(1);
        demo.findWhenLoad();
    }


    <!--1.div：“搜索”、“导出”：根据用户名、职位、手机号、状态、角色来搜索。table-->
    /**table中的数据*/
        //数据
    let datas = {
            goods: [
                {
                    userName: 'lz',
                    status: '已启用',
                    job: '经理',
                    telephone:"13123645678"
                }
            ]
        };

    var demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {
                //tableData是表格中的数据。  datas.goods是为了后端查询数据为空时有一个数据
                tableData: datas.goods,  //  datas数据 中的数组goods
                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                form:{      //这个是编辑里面的form表单，以下是表单要修改的内部的字段名
                    userInfo_id:'',//被点击行的userInfo.id
                    telephone: '',
                    userName: '',
                    roleId: '',
                    job: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''  //截至这里编辑框内的内容结束
                },
                formLabelWidth: '120px',

                // total,
                //搜索的关键字
                findUser:{
                    userName:'',
                    job:'',
                    telephone:'',
                    status:'',
                    roleId:''
                },
                //存储从后端查询的 “所有角色”
                roleInfos:[{
                    id:1,
                    role:'Jinli',
                    roleDesc:'经理'
                },
                    {
                        id:2,
                        role:'guanli',
                        roleDesc:'员'
                    }],
                //当前的页码
                currentPage:1,
                total:1,//总页数
                noResult:'',
                error:'',

                //原来属于appo的数据
                restaurants: [],
                state1: '',
                state2: ''
            };
        },
        methods: {
            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },

            // 时间格式化
            /*formatTime : date => {
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                const hour = date.getHours();
                const minute = date.getMinutes();
                const second = date.getSeconds();
                return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':');
            },*/

            // 日期格式化
            dateFormatter (row, column) {
                let datetime = row.createTime;
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },

            // 禁用状态格式化
            statusFormatter(row, column) {
                let status = row.status;
                if(status === 0){
                    return '已禁用'
                } else {
                    return '已启用'
                }
            },
            //我在pom.xml中引入了“jackson-databind”包
            //点击“导出”，把当前Tabledata通过json方式传递到后端（后端把数据写为一个Excel文件）
            exportList:function (){
                //转换一下，提交转换后的对象
                let tableDataJson=JSON.stringify(demo.tableData);
                axios.post([[@{user/exportList}]],tableDataJson,{headers:
                        {'Content-Type':'application/json;'}
                })
            .then((response)=>{console.log(response)})
                    .catch((err)=>{console.log(err)});
            },

            //打开“新增账号”对话框
            showAddDialog:()=>{
                //想打开对话框
                addUserInfo.dialogFormVisible=true;
                //把查询到的角色数据赋值，为了能在“新增账号”对话框中显示
                addUserInfo.roleInfos=demo.roleInfos;
            },

            //“重置密码”中的对话框
            fill_Secret_dialog:(roleInfo)=>{
                //把被点击行的userInfo的id给对话框中的  隐藏imput
                modPassword.form.userInfo_id=roleInfo.id;
                modPassword.form.userName=roleInfo.userName;
                modPassword.form.telephone=roleInfo.telephone;

                //想打开对话框
                modPassword.dialogFormVisible=true;
            },


            //  这里一点击翻页就会重新去查询数据，所以这里因该是给查询条件赋值，而不是给pagination赋值
            //  后台我们已经将数据分号了页，pagination会自根据后台返回的分页数据给自己的属性变量赋值

            /*handleSizeChange:function(pageSize){
                // 这里当我们点击第几条第几页的时候，控件会将这些值绑定到控件的属性里，此时这些属性已经有值了
                // ，然后在每个属性相对应的change方法
                // 里我们又将该属性传递给了条件查询参数queryParam,于是，后台进行查询，得到结果，
                // 此时控件的所有属性都只剩下，total没有重新赋值了，我们再将结果赋值给控件的total
                // 总条数
                demo.pageSize=pageSize;
                demo.findWhenLoad();
            },*/
            // 当前的页码，改变时会触发
            handleCurrentChange:function (currentPage) {
                demo.currentPage=currentPage;
                demo.findWhenLoad();
            },

            //分页查询数据：把后端的数据，显示在table上
            findWhenLoad() {
                console.log("in findWhenLoad02");
                let statusRaw='';
                if (this.findUser.status=='-1'){
                    statusRaw='0';
                }else if (this.findUser.status=='1'){
                    statusRaw='1';
                }
                axios.get([[@{user/page}]],{
                    params:{
                        pageNum : this.currentPage,
                            // pageNum:pageNum,
                            //搜索的关键字
                            userName:this.findUser.userName,
                            job: this.findUser.job,
                            telephone: this.findUser.telephone,
                            status: statusRaw,
                            roleId: this.findUser.roleId//-----------这个要在后端controller改？？？---
                    }
                })
            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                    console.log("res="+res);
                    this.total = res.data.total;
                    this.tableData = res.data.list;
                    /*this.noResult = false
                    if (this.total === 0) {
                        this.noResult = true
                    }
                    this.error = false
                    this.loading = false*/
                })
                    .catch(error => {
                        console.log(error);
                    });
            },

            //点击表格中某一行的“编辑后”，在 弹出的对话框中填充数据
            fill_userInfo:(userInfo)=>{
                console.log("userInfo.telephone="+userInfo.telephone);
                console.log("userInfo.userName="+userInfo.userName);
                console.log("userInfo.roleId="+userInfo.roleInfo.id);
                console.log("userInfo.job="+userInfo.job);

                //教训：一定是demo.   不要写  this.
                demo.form.userInfo_id=userInfo.id;
                demo.form.telephone=userInfo.telephone;
                demo.form.userName=userInfo.userName;
                demo.form.roleId=userInfo.roleInfo.id;
                demo.form.job=userInfo.job;

            },

            //新增一个userInfo
            add : ()=>{
                alert("在add方法中");
                let params =new FormData();
                params.append("roleInfo_id","2");
                params.append("userName","ccc");
                params.append("password","123456");
                params.append("telephone","13398199549");
                params.append("job","部门经理");
                // params.append("roleBean.id","2");
                axios.post([[@{user/more}]],params)
            .then(function (res) {
                    console.log(res);
                    // location.reload();
                })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            //查询所有的角色
            findAllRoleInfo: ()=>{
                axios.get([[@{role/all}]],{
                    params:{
                    }
                })
            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                    // alert("demo.roleInfos.length="+demo.roleInfos.length);
                    demo.roleInfos.splice(0,demo.roleInfos.length);
                    for(let i=0;i<res.data.length;i++){
                        demo.roleInfos.push(res.data[i]);
                    }
                })
                    .catch(error => {
                        console.log(error);
                    });
            },

            //“编辑”修改 一个user_info数据
            mod : (id)=>{
                let params =new FormData();
                params.append("userName",demo.form.userName);
                params.append("roleInfo.id",demo.form.roleId);
                params.append("job",demo.form.job);
                axios.put([[@{/user/}]] + id,params).then(res => {
                    console.log(res);
                    location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },

            //修改状态；启用和禁用状态之间互相转换
            enable_disable : (id,status)=>{
                let params =new FormData();
                params.append("status",(1-status));
                axios.put([[@{/user/}]] + id,params).then(res => {
                    console.log(res);
                    location.reload();
                    /*for (let i=0;i<demo.roleInfos.length;i++){
                        if(demo.roleInfos[i].id==id){
                            demo.roleInfos[i].status!=(1-status);
                            break;
                        }
                    }*/
                }).catch(function (error) {
                    console.log(error);
                });
            },

            //删除某一行的数据：之前 在不是夏谆谆的table中，测试过可以使用
            /* del : (id,index)=>{
                 axios.delete([[@{/user/}]] + id).then(res => {
                     console.log(res);
                     if(res.data.code == 200){
                         console.log(app.rows);
                         //从数组中移除元素
                         app.rows.splice(index,1);
                     }
                 }).catch(function (error) {
                     console.log(error);
                 });
             }*/

            //"查看"的点击事件 line=scope.row,当前行的所有参数
            handleClick(line) {
                alert(line.id);
            },
            // del:function(id){
            //     this.tableData.splice(id,1);
            // },
            //删除，点击删除之后，给后台指令，后台回到前端页面刷新页面。
            del: function (id) {
                alert(id);
                this.tableData.splice(id, 1);
                let that = this
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$http("删除操作的路径名" + id)//“”+接上删除的id值
                        .then(function (respDate) {
                            if (respDate.data == "success") {
                                that.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                that.toPage(that.currentPage);
                            } else {
                                that.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                                that.toPage(that.currentPage);
                            }
                        })
                }).catch(() => {
                    this.$message({

                        type: 'info',
                        message: '已取消删除'

                    });
                });
            },//删除方法截止


            //原来属于appo中的方法
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "阳阳麻辣烫", "address": "天山西路389号"},
                    {"value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                ];
            },
            handleSelect(item) {
                console.log(item);
            }
        },//method方法截止

        //查询所有的角色，用来做<option>
        created : function () {
            this.findAllRoleInfo();
        },
        mounted() {
            this.restaurants = this.loadAll();
        }
        // 局部过滤器，仅针对当前  组件（#app <div>）有效
        /*filters:{
            dateYMDHMSFormat:date=>{
              let d=  new date;
              d.get
                return date.toLocaleLowerCase();
            }
        }*/
    });

    //分页还没写======


</script>



<!--分页？-->
<div id="paging">

</div>




</body>


</html>